<template>
  <div class="footer">
    <div class="left">
      <div class="left-content">
        <div
          class="contents"
          v-for="(item, index) in about"
          :key="index"
          @mouseover="changecolor(index)"
          @mouseleave="backcolor()"
          @click="To(item)"
        >
          <p class="text" :class="{ active: active == index }">
            {{ item.text }}
            <span class="state" v-show="item.id == 5">音乐</span>         
          </p>
        </div>
      </div>
    </div>
    <div class="center">
      <img
        src="https://www.imageoss.com/images/2021/10/08/-1376271d1e1038dfe.png"
        alt=""
      />
    </div>
    <div class="right">
      <img
        src="https://www.imageoss.com/images/2021/10/08/a37bf41b56c8346046a9a8e5a3a0f927d0071938611d677.jpg"
        alt=""
      />
      <img
        src="https://www.imageoss.com/images/2021/10/13/49f54072a037fafa87a669a898fe87fea7085a204c6d7605.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: -1,
      about: [
        { text: "关于我们", id: 1, url: "/aboutus" },
        { text: "联系我们", id: 2, url: "/callus" },
        { text: "隐私保护", id: 3, url: "/rivacyProtection" },
        { text: "发展历程", id: 4, url: "/developmentHistory" },
        { text: "在线听歌", id: 5, url: "/listen" },
        { text: "回忆瀑布", id: 6, url: "/Picture" },
        { text: "Vlogo",    id: 7, url: "/vlogo" },
        { text: "更多信息", id: 8, url: "/more" },
      ],
    };
  },
  methods: {
    //改变状态
    changecolor(index) {
      this.active = index;
    },
    //初始化状态
    backcolor() {
      this.active = -1;
    },
    //跳转导航
    To(item) {
      this.$router.push({ path: item.url });
    },
  },
};
</script>

<style scoped>
@import "../css/footer.css";
</style>
